<template>
  <div id="eqStatusWatch">
    <el-row>
      <!--左侧部分 -->
      <el-col :span="5" id = "left" style="left: 0px;">
        <el-row>
          <el-col :span="24">
            <div class = "chart_left  chart_main">
              <el-row>
                <el-col :span="1" style="width: 1.2vw">
                  <div class = "block"></div>
                </el-col>
                <el-col :span="22">
                  <div class = "title">设备故障次数</div>
                </el-col>
              </el-row>
              <div id = "chart1" class = "chart"></div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class = "chart_left chart_main">
              <el-row>
                <el-col :span="1" style="width: 1.2vw">
                  <div class = "block"></div>
                </el-col>
                <el-col :span="22">
                  <div class = "title">设备可用率</div>
                </el-col>
              </el-row>
              <div id = "chart2" class = "chart"></div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class = "chart_left chart_main">
              <el-row>
                <el-col :span="1" style="width: 1.2vw">
                  <div class = "block"></div>
                </el-col>
                <el-col :span="22">
                  <div class = "title">故障时序分布</div>
                </el-col>
              </el-row>
              <div id = "chart3" v-popover:pop_chart3 class = "chart"></div>
              <el-popover
                ref="pop_chart3"
                placement="right"
                trigger="click">
                <el-table
                  :data="eq_tab"
                  id = "eq_tab3"
                  height="96%"
                  style="max-height: 60vh">
                  <el-table-column
                    prop="time"
                    align="center"
                    label="时间段">
                  </el-table-column>
                  <el-table-column
                    prop="ytj"
                    align="center"
                    label="一体机故障">
                  </el-table-column>
                  <el-table-column
                    prop="dl"
                    align="center"
                    label="电力设备">
                  </el-table-column>
                  <el-table-column
                    prop="sxt"
                    align="center"
                    label="摄像头">
                  </el-table-column>
                </el-table>
              </el-popover>
            </div>
          </el-col>
        </el-row>
      </el-col>
     <!--地图部分 -->
      <el-col :span="24">
        <div id="allmap" ref="allmap"></div>
      </el-col>
      <!--中间部分 -->
        <div class = "chart_center " style="height:7vh;width:30vw;">
            <el-row>
                <el-col :span="1" style="width: 1.2vw">
                    <div class = "block"></div>
                </el-col>
                <el-col :span="22">
                    <div class = "title">故障分布地图</div>
                </el-col>
                <el-col :span="24" style="display:flex;">
                    <div class = "legendBox leg1">
                            <p></p>
                            <p>电力设备</p>
                            <p><b>(</b> {{legNum1}} <b>)</b></p>
                    </div>
                    <div class = "legendBox leg2">
                            <p></p>
                            <p>摄像头设备</p>
                            <p><b>(</b> {{legNum2}} <b>)</b></p>
                    </div>
                    <div class = "legendBox leg3">
                            <p></p>
                            <p>一体机设备</p>
                            <p><b>(</b> {{legNum3}} <b>)</b></p>
                    </div>
                </el-col>
            </el-row>
        </div>
      <!--右侧部分 -->
      <el-col :span="6" id = "right" style="right: 0px;">
        <el-row>
          <el-col :span="24">
            <div class = "chart_right chart_main">
              <el-row>
                <el-col :span="1" style="width: 1.2vw">
                  <div class = "block1 bgRed"></div>
                </el-col>
                <el-col :span="22">
                  <div class = "title">电力设施状况</div>
                </el-col>
              </el-row>
              <div class = "chart">
                <el-row>
                  <el-col :span="24">
                    <div  style="height: 25vh; position:relative">
                      <div class="tltleBox"><span>设备编号</span><span>设备状态</span><span>设备位置</span></div>
                      <div style="height:4vh;"></div>
                      <div style="height: 21vh;overflow: auto;">
                        <div class="textBox"  v-for="(item,i) in tableData" :key="i" :class="{'isAvtive1':isActive1 == item.status}"><span>{{item.faultEq}}</span><span>{{item.status}}</span><span>{{item.position}}</span></div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class = "chart_right chart_main" >
              <el-row>
                <el-col :span="1" style="width: 1.2vw">
                  <div class = "block1 bgYellow"></div>
                </el-col>
                <el-col :span="22">
                  <div class = "title">摄像头设备状况</div>
                </el-col>
              </el-row>
              <div class = "chart">
                <el-row>
                  <el-col :span="24">
                    <div  style="height: 25vh;overflow: auto; position:relative">
                      <div class="tltleBox"><span>设备编号</span><span>设备状态</span><span>设备位置</span></div>
                      <div style="height:4vh;"></div>
                      <div style="height: 21vh;overflow: auto;">
                         <div class="textBox"  v-for="(item,i) in tableData" :key="i" :class="{'isAvtive2':isActive2 == item.status}"><span>{{item.faultEq}}</span><span>{{item.status}}</span><span>{{item.position}}</span></div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class = "chart_right chart_main" >
              <el-row>
                <el-col :span="1" style="width: 1.2vw">
                  <div class = "block1 bgBlue"></div>
                </el-col>
                <el-col :span="22">
                  <div class = "title">一体设备状况</div>
                </el-col>
              </el-row>
              <div class = "chart">
                <el-row>
                  <el-col :span="24">
                    <div  style="height: 25vh;overflow: auto;position:relative">
                      <div class="tltleBox"><span>设备编号</span><span>设备状态</span><span>设备位置</span></div>
                      <div style="height:4vh;"></div>
                      <div style="height: 21vh;overflow: auto;">  
                        <div class="textBox"  v-for="(item,i) in tableData" :key="i" :class="{'isAvtive3':isActive3 == item.status}"><span>{{item.faultEq}}</span><span>{{item.status}}</span><span>{{item.position}}</span></div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { TMap } from '../TMap';
  import jq from 'jquery';
  import axios from 'axios';
  import {config,xAxiss,yAxiss,grid,tooltip,dotHtml,legend} from '../../static/js/config/chartConfig.js';
  var echarts = require('echarts');
  import {parks,venue} from '../../static/js/map/parking.js';
  import power_1 from '../../static/img/dianli_false.png';
  import power_2 from '../../static/img/shexiangtou_false.png';
  import power_3 from '../../static/img/yitiji_false.png';
  import power_4 from '../../static/img/dianli_true.png';
  import power_5 from '../../static/img/shexinagtou_true.png';
  import power_6 from '../../static/img/yitiji_true.png';
  var chart1 = [{"tm":"9:00","nu":100},{"tm":"9:05","nu":121},{"tm":"9:10","nu":125},{"tm":"9:15","nu":133}];
  var dataList = [{
        faultEq: '设备编号1',
        status: '正常',
        position:'位置1'
      }, {
        faultEq: '设备编号2',
        status: '正常',
        position:'位置1'
      }, {
        faultEq: '设备编号3',
        status: '故障',
        position:'位置1'
      }, {
        faultEq: '设备编号4',
        status: '故障',
        position:'位置1'
      },{
        faultEq: '设备编号5',
        status: '正常',
        position:'位置1'
      },{
        faultEq: '设备编号5',
        status: '正常',
        position:'位置1'
      },]
  var chart3 = [{
    time: '6:00',
    ytj: '1',
    dl: '2',
    sxt: '0'
  }, {
    time: '6:30',
    ytj: '0',
    dl: '0',
    sxt: '0'
  }, {
    time: '7:00',
    ytj: '0',
    dl: '0',
    sxt: '1'
  },{
    time: '7:30',
    ytj: '0',
    dl: '0',
    sxt: '0'
  },{
    time: '8:00',
    ytj: '1',
    dl: '0',
    sxt: '1'
  },{
    time: '8:30',
    ytj: '0',
    dl: '0',
    sxt: '0'
  },{
    time: '9:00',
    ytj: '0',
    dl: '1',
    sxt: '0'
  },{
    time: '9:30',
    ytj: '0',
    dl: '0',
    sxt: '0'
  },{
    time: '10:00',
    ytj: '0',
    dl: '1',
    sxt: '2'
  },{
    time: '10:30',
    ytj: '0',
    dl: '0',
    sxt: '1'
  },{
    time: '10:00',
    ytj: '0',
    dl: '1',
    sxt: '2'
  },{
    time: '10:30',
    ytj: '0',
    dl: '0',
    sxt: '1'
  },{
    time: '10:00',
    ytj: '0',
    dl: '1',
    sxt: '2'
  },{
    time: '10:30',
    ytj: '0',
    dl: '0',
    sxt: '1'
  },{
    time: '10:00',
    ytj: '0',
    dl: '1',
    sxt: '2'
  },{
    time: '10:30',
    ytj: '0',
    dl: '0',
    sxt: '1'
  }]
  export default {
    name:"eqStatusWatch",
    components: {

    },
    data(){
      return{
        isActive1:'故障',
        isActive2:'故障',
        isActive3:'故障',
        legNum1:"2",
        legNum2:"3",
        legNum3:"4",
        tableData:dataList,
        eq_tab:chart3,
        t_w1:'',
        t_w2:'',
      }
    },
    created () {
      for(var i=0;i<dataList.length; i++){
          if(dataList[i].status == "故障"){
            var fault = dataList.splice(i,i);
            for(var j=0;j<fault.length;j++){
               dataList.unshift(fault[j])
            }
          }
      }
      // console.log(this.tableData)
    },
    mounted () {
      this.t_w1 = jq('#tab').width()*0.3+'px'
      this.t_w2 = jq('#tab').width()*0.3+'px'
      this.map();
      this.chart1();
      this.chart2();
      this.chart3();
    },
    methods: {
        map(){
          var p = parks();
          TMap().then(qq => {
            var map = new qq.maps.Map(document.getElementById("allmap"), {
              // 地图的中心地理坐标。
              center: new qq.maps.LatLng(29.717986,106.543071),
              zoom: 15,
              mapStyleId: 'style1',
             // disableDefaultUI: true,    //禁止所有控件
            });
            //停车场轮廓
            var c = [85,20,50,30,40,60,33,39,82,70,90,60,60,18,89,67,34]
            var color = ['#F32056','#E88216','#4CE4E9'];
            for(var i = 0;i < p.length; i++) {
              (function(v){
                var path = []
                var cl = color[2]
                if(c[v]>=70&&c[v]<85){
                  cl = color[1]
                }else if(c[v]>=85){
                  cl = color[0]
                }
                for (var j = 0; j < p[v].path.length; j++) {
                  path.push(new qq.maps.LatLng(p[v].path[j][0],p[v].path[j][1]))
                }
                var polygon = new qq.maps.Polygon({
                  map: map,
                  path: path,
                  strokeWeight: 0,
                  zIndex: 1000,
                  strokeColor: new qq.maps.Color(0, 0, 0, 0.8),
                  fillColor: qq.maps.Color.fromHex('#3c4779', 0.8)
                });
                var center = new qq.maps.LatLng(p[v].center[0],p[v].center[1]);
                if(p[v].showName){
                 var label = new qq.maps.Label({
                   position: center,
                   map: map,
                   content: '<div class = "tit">'+p[v].name+'</div>'
                 });
               }
                var infoWin = new qq.maps.InfoWindow({
                  map: map
                });
                qq.maps.event.addListener(polygon, 'click', function() {
                  infoWin.open();
                  infoWin.setContent('<div class = "mk" style="text-align:center;white-space:'+
                    'nowrap;margin:10px;color: #000fff;">' +
                    p[v].name + ' 停车场</div>');
                  infoWin.setPosition(center);
                });
              })(i);
            }
            var dd = [{"type":1,"point":[29.718060,106.545281],"info":'1'},
                      {"type":2,"point":[29.711053,106.538243],"info":'2'},
                      {"type":3,"point":[29.718321,106.539574],"info":'2'},
                      {"type":1,"point":[29.720856,106.543264],"info":'1'},
                      {"type":3,"point":[29.725402,106.542749],"info":'2'},

                      {"type":4,"point":[29.725365,106.544423],"info":'2'},
                      {"type":5,"point":[29.722011,106.544509],"info":'2'},
                      {"type":6,"point":[29.717613,106.543908],"info":'2'},
                      {"type":4,"point":[29.715340,106.540003],"info":'2'},
                      {"type":6,"point":[29.712842,106.536441],"info":'2'}
                      ]
            var img_url = [power_1,power_2,power_3,power_4,power_5,power_6]

            for(var y = 0;y < dd.length; y++) {
              (function(q){
                  var ce = new qq.maps.LatLng(dd[q].point[0],dd[q].point[1]);
                  var h = 6;
                  var w = 4;
                  var clas = 'eq_watch1'
                  if(dd[q].type>3){
                    h = 4;
                    w = 3;
                    clas = 'eq_watch2'
                  }
                  var la = new qq.maps.Label({
                    position: ce,
                    map: map,
                    zIndex: 1000,
                    content: '<div class = "'+clas+'" style="height: '+h+'vh;width:'+w+'vh;margin-top: -120%;margin-left: -60%;background-image: url('+img_url[dd[q].type-1]+');background-repeat: no-repeat;background-size: 100%;"></div>'
                  });
                var inf = new qq.maps.InfoWindow({
                  map: map
                });
                if(dd[q].type<4){
                  qq.maps.event.addListener(la, 'click', function() {
                    inf.open();
                    inf.setContent('<div style="text-align:center;white-space:'+
                      'nowrap;margin:10px;color: #000fff;">设备故障'+q+'</div>');
                    inf.setPosition(ce);
                  });

                }
              })(y);
            }
            qq.maps.event.addListener(map,'zoom_changed',function() {
              var zoomLevel = map.getZoom();
              var h1 = 6
              var w1 = 4
              if(zoomLevel == 13){
                h1 = 4
                w1 = 2.5
              }else if(zoomLevel == 14){
                jq('.tit').css('font-size','0.5vw')
                h1 = 5
                w1 = 3.5
              }else if(zoomLevel == 15){
                jq('.tit').css('font-size','0.7vw')
                h1 = 6
                w1 = 4
              }else if(zoomLevel == 16){
                jq('.tit').css('font-size','0.8vw')
                h1 = 7
                w1 = 4.5
              }else if(zoomLevel == 17){
                jq('.tit').css('font-size','0.9vw')
                h1 = 8
                w1 = 6
              }else if(zoomLevel == 18){
                jq('.tit').css('font-size','1.1vw')
                h1 = 9
                w1 = 6.5
              }
              jq('.eq_watch1').css('width',w1+'vh')
              jq('.eq_watch1').css('height',h1+'vh')
              jq('.eq_watch2').css('width',w1*3/4+'vh')
              jq('.eq_watch2').css('height',h1*3/4+'vh')
              if(zoomLevel < 13){
                jq('.eq_watch1').css('display','none')
                jq('.eq_watch2').css('display','none')
              }else{
                jq('.eq_watch1').css('display','block')
                jq('.eq_watch2').css('display','block')
              }
              var si = {"f15":1.5,"f16":1.8,"f17":2.3,"f18":3.8}
              if(zoomLevel>14){
                jq('.tit').css('display','block')
              }else{
                jq('.tit').css('display','none')
              }
            });
            //国博馆轮廓
            for (var n = 0; n < venue().length; n++) {
              var ph = []
              for (var k = 0; k < venue()[n].path.length; k++) {
                ph.push(new qq.maps.LatLng(venue()[n].path[k][0], venue()[n].path[k][1]))
              }
              var cl1 = '#3c4779'
              var c1 = 0.6
              var bw = 0
              if(n == 0){
                c1 = 0.001
                bw = 2
              }
              if(n > 2){
                c1 = 0.8
                bw = 0
                cl1 = '#1281D5'
              }
              var polygon2 = new qq.maps.Polygon({
                map: map,
                path: ph,
                strokeWeight: bw,
                strokeDashStyle: 'dash',
                strokeColor: '#a2ecfb',
                fillColor: qq.maps.Color.fromHex(cl1, c1)
              });
              var center = new qq.maps.LatLng(venue()[n].center[0], venue()[n].center[1]);
              var label = new qq.maps.Label({
                position: center,
                map: map,
                zIndex: 10,
                content: '<div class = "tit">' + venue()[n].name + '</div>'
              });
            }
          });
          jq(function(){
            jq("#allmap").bind("DOMNodeInserted",function(e){
              var tempCount = 0;
              jq("#allmap .smnoprint").siblings().each(function(){
                tempCount++;
                if(tempCount==2||tempCount==3){
                  jq(this).remove();
                }
              });
            });
          });
        },
        chart1() {
            var chartsBar_left = echarts.init(document.getElementById('chart1'));
            var xData = ["一体机", "摄像头设备", "摄像头设备",];
            var data1 =[26,31,19,]
            var data11 = []
            var data2 =[2,4,3]
            var data21 = []
            for(var i = 0;i < xData.length; i++) {
              if(data1[i] != 0){
                data11.push(1)
              }else{
                data11.push(0)
              }
              if(data2[i] != 0){
                data21.push(1)
              }else{
                data21.push(0)
              }
            }
            var barWidth = jq("#chart1").width()/xData.length*0.25
            var chartsBar_left = echarts.init(document.getElementById('chart1'));
            var option = {
                tooltip:{
                  trigger: "axis",
                  axisPointer: config().axisPointer,
                  textStyle: config().textStyle,
                  formatter: function(params) {
                    var result = params[0].name
                    result += "</br>" + dotHtml(params[0].color.colorStops[0].color) +  params[0].seriesName + '：' +  params[0].data +'台'+
                      "</br>" + dotHtml(params[2].color.colorStops[0].color) +  params[2].seriesName + '：' +  params[2].data + '台'
                    return result
                  }
                },
                grid:  grid(20),
                legend: legend(["正常设备", "故障设备",],4),
                xAxis: xAxiss({'data':xData,'name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
                yAxis: yAxiss({'data':'','name':'台','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
                series: [
                  {
                    name: '正常设备',
                    type: 'pictorialBar',
                    symbol: 'path://M35,0L35,70L0,70z M35,0L35,70L70,70z',
                    data: data1,
                    barWidth: barWidth,
                    // barGap: 1, //柱子之间间距
                    symbolOffset: [-barWidth/1.7, -barWidth/4],
                    z: 99,
                    itemStyle: {
                      normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                          offset: 0,
                          color: '#0788EE'
                        }, {
                          offset: 0.5,
                          color: '#0788EE'
                        }, {
                          offset: 0.5,
                          color: '#15B8F9'
                        }, {
                          offset: 1,
                          color: '#15B8F9'
                        }]),
                        opacity: 1,
                      }
                    }
                  },
                  {
                    // name: '年报上报率2',
                    type: 'pictorialBar',
                    symbol: 'diamond',
                    barWidth: barWidth,
                    symbolOffset: [-barWidth/1.7, 0],
                    symbolSize: ['100%', barWidth/2],
                    z: 99,
                    itemStyle: {
                      normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                          offset: 0,
                          color: '#0788EE'
                        }, {
                          offset: 0.5,
                          color: '#0788EE'
                        }, {
                          offset: 0.5,
                          color: '#15B8F9'
                        }, {
                          offset: 1,
                          color: '#15B8F9'
                        }]),
                        opacity: 1,
                      }
                    },
                    data: data11
                  },
                  {
                    name: '故障设备',
                    type: 'pictorialBar',
                    symbol: 'path://M35,0L35,70L0,70z M35,0L35,70L70,70z',
                    data: data2,
                    barWidth: barWidth,
                    // barGap: 1, //柱子之间间距
                    symbolOffset: [barWidth/1.7, -barWidth/4],
                    z: 99,
                    itemStyle: {
                      normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                          offset: 0,
                          color: '#FE6D5B'
                        }, {
                          offset: 0.5,
                          color: '#FE6D5B'
                        }, {
                          offset: 0.5,
                          color: '#FF2661'
                        }, {
                          offset: 1,
                          color: '#FF2661'
                        }]),
                        opacity: 1,
                      }
                    }
                  },
                  {
                    // name: '年报上报率2',
                    type: 'pictorialBar',
                    symbol: 'diamond',
                    barWidth: barWidth,
                    symbolOffset: [barWidth/1.7, 0],
                    symbolSize: ['100%', barWidth/2],
                    z: 99,
                    itemStyle: {
                      normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                          offset: 0,
                          color: '#FE6D5B'
                        }, {
                          offset: 0.5,
                          color: '#FE6D5B'
                        }, {
                          offset: 0.5,
                          color: '#FF2661'
                        }, {
                          offset: 1,
                          color: '#FF2661'
                        }]),
                        opacity: 1,
                      }
                    },
                    data: data21
                  },
                ]
              };
            chartsBar_left.setOption(option);
            window.onresize = chartsBar_left.resize;
        },
        chart2(){
            var data1 = [];
            var data2 = [];
            for (var i = 1; i <chart1.length; i++) {
            var tmp = {}
            tmp.value = chart1[i].nu
            tmp. symbolPosition = 'end'
            data1.push(chart1[i].nu)
            data2.push(tmp)
            }
            var xData = ["一体机","摄像头设备","摄像头设备",];
            var barWidth = jq("#chart2").width()/xData.length*0.2;
            var chart2 = echarts.init(document.getElementById('chart2'));
            var option = {
              grid: grid(20),
              tooltip:  {
                trigger: "axis",
                axisPointer: config().axisPointer,
                textStyle: config().textStyle,
                formatter: function(params) {
                var result = params[0].name
                result += "</br>" + dotHtml(params[0].color) + params[2].seriesName + '：' + params[2].data+'台'+
                  "</br>" + dotHtml(params[3].color) + params[3].seriesName + '：' + params[3].data+' %'
                return result}
                },
                legend: legend(["设施数量", "故障率",],4),
                xAxis: xAxiss({'data':xData,'name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'',"splitLineColor":''}),
                yAxis: [yAxiss({'data':'','name':'台','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":true,"splitLineType":'',"splitLineColor":''}),
                  yAxiss({'data':'','name':'','lineShow':true,'labelShow':true,'position':'right','unit':'%',"splitLineShow":false,"splitLineType":'',"splitLineColor":''})
                ],
                series: [
                  {
                  name: '设备',
                  type: 'pictorialBar',
                  symbolSize: [barWidth,  barWidth*0.6],
                  symbolOffset: [0, -barWidth*0.3],
                  z: 12,
                  itemStyle: {
                    normal: {
                      color: '#0399fd'
                    }
                  },
                  data: data2
                }, {
                  name: '设备',
                  type: 'pictorialBar',
                  symbolSize: [barWidth, barWidth*0.6],
                  symbolOffset: [0, barWidth*0.3],
                  z: 12,
                  itemStyle: {
                    normal: {
                      color: '#0399fd'
                    }
                  },
                  data: data1
                }, {
                  name :'设施数量',
                  type: 'bar',
                  itemStyle: {
                      normal: {
                        color: '#0399fd',
                        opacity: 0.7,
                      }
                  },
                  //silent: true,
                  barWidth: barWidth,
                  barGap: '-100%', 
                  data: data1
                },
                {
                    name:'故障率',
                    type: "line",
                    yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                    smooth: false, //平滑曲线显示
                    symbolSize: config().symbolSize,
                    lineStyle: {
                      width: config().lineWidth
                    },
                    itemStyle: {
                        normal: {
                            color: '#ff0053',
                        }
                    },
                    data: [4.2, 3.8, 4.8,]
                },
              ]
          }
            chart2.setOption(option)
            window.onresize = chart2.resize;
        },
        chart3(){
            var xData = ["0:00","2:24","4:48","7:12","9:36","12:00","14:24","16:48","17:12"];
            var chartsBar_left = echarts.init(document.getElementById('chart3'));
            var yData1 = [2, 1, 1, 1, 4,2, 3, 1, 2,];
            var option = {
                tooltip:  {
                  trigger: "axis",
                  axisPointer: config().axisPointer,
                  textStyle: config().textStyle,
                  formatter: function(params) {
                    var result = params[0].name
                    result += "</br>" + dotHtml(params[0].color) + params[0].seriesName + '：' + params[0].data + '台'
                    return result}
                },
                grid: grid(20),
                xAxis: xAxiss({'data':xData,'name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
                yAxis: yAxiss({'data':'','name':'台','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":true,"splitLineType":'dashed',"splitLineColor":''}),
                series: [{
                        type: 'line',
                        name:"故障数",
                        yAxisIndex: 0,
                        symbolSize: config().symbolSize,
                        lineStyle: {
                          width: config().lineWidth
                        },
                        itemStyle: {
                            normal: {
                                color: '#0391F0',
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#0391F0'
                                }, {
                                offset: 1,
                                color: 'rgba(0,244,255,0.1)'
                                }], false)
                            }
                        },
                        data: yData1
                    },
                ]
            }
            chartsBar_left.setOption(option);
            window.onresize = chartsBar_left.resize;
        },
    }
  }
</script>
<style lang="scss" scoped>
  #eqStatusWatch{
    width: 100%;
    height: 100vh;
    *{margin: 0;padding: 0;}

    #left,#right{
      position: absolute;
      z-index: 1;
      top:7vh;
      background: rgba(12,27,63,0.73);
    }
    .chart{
      height: 85.5%;
    }
    .chart_left{
      height: 29.6vh;
    }
    .chart_right{
      height: 29.6vh;
      .block1{
            width: 2vh;
            height: 2vh;
            background-repeat: no-repeat!important;
            background-size: 100% 100%!important;
            margin-right: 40%;
            margin-top: 40%;
      }
      .bgRed{background-image: url('../../static/img/dianli_false.png')!important;}
      .bgYellow{background-image: url('../../static/img/shexiangtou_false.png')!important;}
      .bgBlue{background-image: url('../../static/img/yitiji_false.png')!important;}
    }
    .chart_center{
        position: absolute;
        top: 8vh;
        margin-left: 23%;
        color: #A9B2CD;
    }
    #allmap{
      height: 100vh;
      overflow: hidden;
    }
    .legendBox{
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7vw;
        color: #AFB8D2;
        margin-top: 1vh;
        margin-right: 1vw;
        p:nth-child(1){
          background-repeat: no-repeat;
          background-size: 100%;
          width: 4vh;
          height: 5vh;
        }
        p:nth-child(3){color: #FF2661;}
    }
    .leg1{

        p:nth-child(1){
          background-image: url('../../static/img/dianli_false.png');
        }
        p:nth-child(2){margin: 0 0.5vw}
    }
    .leg2{
        p:nth-child(1){
          background-image: url('../../static/img/shexiangtou_false.png');
        }
        p:nth-child(2){margin: 0 0.5vw}
    }
    .leg3{
        p:nth-child(1){
          background-image: url('../../static/img/yitiji_false.png');
        }
        p:nth-child(2){margin: 0 0.5vw}
    }
    .tltleBox{
      background: #023954;
      position:absolute;
      top: 0;
    }
    .tltleBox,.textBox{
      width: 100%;
      display: flex;
      align-items: center;
      height:4vh;
      line-height: 4vh;
      font-size: 0.7vw;
      color: #0475C3;
      span{
        width: 33%;
        text-align: center;
      }
    }
    .textBox{

      color: #AFB8D2;
    }
    .tltleBox:hover,.textBox:hover{
      background: #023954;
    }
    .textBox:nth-child(even) {
      background-color: #01354E;
    }
    .isAvtive1{
      color: #FF2661;
    }
    .isAvtive2{
      color: #FF2661;
    }
    .isAvtive3{
      color: #FF2661;
    }
  }
</style>
